@charset "utf-8";

$fontsize:40;

@function r($px){
    @return $px/$fontsize * 1rem;
}

//共用
@mixin imgsize{
    width: r(153);
    height: r(149);
    margin: 0 auto;
    img{
        width: 100%;
        height: 100%;
        
    }
}
@mixin tu{
    width: r(132);
    height: r(133);
    img{
        width: 100%;
        height: 100%;
        
    }
}
@mixin nav2{
    width: r(704);
    height: r(115);
    margin: 0 auto;
    vertical-align: middle;
    display: block;
    .zt_left2{
        line-height: r(96);
        display: inline-block;
        .aa{
            width: r(37);
            height: r(35);
            float: left;
            img{
                width: 100%;
                height: 100%;
            }
        }
        span{
            margin-left: r(17);
            font-size: r(30);
            i{
                color: #FF9344;
            }
        }
    }
    .zt_right2{
        float: right;
        line-height: r(75);
        span{
            font-size: r(25); 
        }
        i{
            color: #FF9344;
        }
    }    
}
//html{font-size:$fontsize;}
html,body{
    width: 100%;
    height: 100%;
}
.web{
    width: 100%;
    height: 100%;
    position: relative;
    //头部
    header{
        width: 100%;
        height: r(131);
        position: absolute;
        top: 0;
        .header_left{
            width: r(125);
            height: r(57);
            border: 1px solid #FF9344;
            margin-top: r(48);
            margin-left: r(21);
            text-align: center;
            border-radius: 25px;
            line-height: r(57);
            font-size: r(20);
            float: left;
            vertical-align: middle;
            display: inline-block;
        }
        .header_middle{
            display:block;
            text-align: center;
            margin-top: r(64);
            font-size: r(25);
        }
        .selectBar{
            float: right;
            margin-right: r(21);
            margin-top: r(50);
            width: r(158);
            height: r(57);
            border: 1px solid #ff9344;
            background: url(../img/tuangou/icon.png) no-repeat right center;
            background-size: r(30) r(15);
            select{
                width: 100%;
                height: 100%;
                background: transparent;
                border: none;
                -webkit-appearance: none;
                vertical-align: top;
                padding-left: r(14);
                font-size: r(25);
            }
        }
    }
    //主体
    section{
        position: absolute;
        top: r(131);
        bottom: r(136);
        width: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        .lb{
            width: r(704);
            height: r(217);
            margin: 0 auto;
            p{
                font-size: r(26);
            }
            ul li{
                width: r(176);
                height: r(184);
                float: left;
                text-align: center;
                box-sizing: border-box;
                .lb1{
                    @include imgsize;
                }
                .lb2{
                    @include imgsize;
                }
                .lb3{
                    @include imgsize;
                }
                .lb4{
                    @include imgsize;
                }
            }
        }
        .section_nav{
            @include nav2;
        }
        .lb2{
            width: r(704);
            height: r(133);
            margin: 0 auto;
            ul li{
                width: r(175);
                height: r(133);
                float: left;
                .cate1{
                    @include tu;
                }
                .cate2{
                    @include tu;
                }
                .cate3{
                    @include tu;
                }
                .cate4{
                    @include tu;
                }
            }
        }
        .section_nav2{
            @include nav2;
        }
        .section_nav3{
            @include nav2;
        }
    }
    footer{
        width: 100%;
        height: r(136);
        background: white;
        position: absolute;
        bottom: 0;
        a{
            color: #000000;
        }
        
        ul li{
            width: 25%;
            height: 100%;
            float: left;
            text-align: center;
            padding-top: 8px;
            box-sizing: border-box;
            i{
                color: #FF9344;
            }
            .iconfont{
                color: #FF9344;
                font-size: r(65);
                -webkit-text-stroke: 1px #FF9344;
                color: transparent;
                
            }
            &.active .iconfont{
                color: #FF9344;
            }
            p{
                font-size: r(26);
            }
            &:hover .iconfont{
                color: red;  
            }
        }
    }
}